/* --- media query --- */
@media (min-width: 850px) {
	.section h4 {
		font-weight: 300;
		font-size: 1.2em;
	}
	
	header h4 > div {
		display: inline-block;
	}
	.section6,
	.section7 {
		background-size: 100% 100%;
	}
	
	/* --- page 1st --- */
	.section1 .title {
		margin: 0 auto;
		text-align: center;
	}
	
	.section1 .title img {
		width: 40%;
	}
		
	.section1 .bg_code > div {
		-webkit-column-count: 4;
		column-count: 4;
	}	
	
    /* --- page 2nd --- */
    .section2 div.adaptWrapper > div {
        width: 48%;
        display: inline-block;
    }

    .section2 div.adaptWrapper > div.circle {
        display: none;
    }

    .section2 div.adaptWrapper {
        position: relative;
    }

    .section2 div.adaptWrapper > div.circle_wider div.outer {
        height: 90em;
        width: 90em;
        border: 0.15em black dotted;
        border-radius: 50%;
        position: absolute;
        left: -47em;
        top: -47em;
		animation: circle_rotate 10s ease-in-out infinite;
		-webkit-animation: circle_rotate 10s ease-in-out infinite;
		-moz-animation: circle_rotate 10s ease-in-out infinite;
    }

    .section2 div.adaptWrapper > div.circle_wider div.outer:after {
        content: '';
        position: absolute;
		width: 5em;
		height: 5em;
		right: 10.1em;
		bottom: 10.8em;
        border: 0.2em #333 solid;
        border-radius: 100%;
    }

    .section2 div.adaptWrapper > div.circle_wider div.outer:before {
        content: '';
        position: absolute;
        width: 1.5em;
        height: 1.5em;
        right: 11.5em;
        bottom: 12.2em;
        border: 0.5em #1E587D solid;
		border-radius: 100%;
    }
	
    .section2 div.adaptWrapper > div.circle_wider div.inner {
        height: 48em;
        width: 48em;
        border: 0.15em black dotted;
        border-radius: 100%;
        position: absolute;
        left: -24em;
        top: -24em;
		animation: circle_rotate_reverse 10s ease-in-out infinite;
		-webkit-animation: circle_rotate_reverse 10s ease-in-out infinite;
		-moz-animation: circle_rotate_reverse 10s ease-in-out infinite;
    }

    .section2 div.adaptWrapper > div.circle_wider div.inner:after {
        content: '';
        position: absolute;
        width: 4em;
        height: 4em;
        right: .4em;
        bottom: 10.8em;
        border: 0.2em #1E587D solid;
        border-radius: 100%;
    }

    .section2 div.adaptWrapper > div.circle_wider div.inner:before {
        content: '';
        position: absolute;
        width: 1em;
        height: 1em;
        right: 1.5em;
        bottom: 12em;
        border: 0.5em #333 solid;
        border-radius: 100%;
    }

    .section2 div.adaptWrapper > div > header {
        margin: 6em 0 2em;
        font-size: 1.3em;
    }

    .section2 div.adaptWrapper > div > header h4 {
        margin-left: 6em;
    }

    .section2 div.adaptWrapper .title > div:nth-child(1) img {
        width: 60%;
    }
		.section2 div.adaptWrapper .title > div:nth-child(2) img {
			margin-left: -8em;
		}
		.section2 div.adaptWrapper .title > div:nth-child(3) img {
			margin-left: -15em;
		}

    /* --- page 3rd --- */
    .section3 header {
        margin-top: 9em;
    }

	.section3 header.Grid-Row {
		padding-bottom: 5em;
	}
		
    .section3 .title img:first-child {
        margin: -2em 0 -3em;
        width: 25%;
    }	
		.section3 .title img:nth-child(2) {
			width: 30%;
			margin: 0 0 -0.8em -1.5em;
		}
		.section3 .title img[src="png/page2/font_3.png"] {
			width: 40%;
			margin-top: 3em;
		}	
		.section3 .title img:last-child {
			display: block;
			width: 28%;
			margin: 1em auto;
		}
	
    .section3 .lang > div {
		width: 5em;
		height: 5em;
        font-size: 1.2em;
        padding-top: 1em;
		margin-right: 0.9em;
    }

    .section3 .lang_wrapper {
        bottom: 3em;
    }

    /* --- page 4th --- */
	.section4 .fp-tableCell {
		vertical-align: middle !important;
	}
	
	.section4 header {
		position: absolute;
		top: 0;
		z-index: 1000;
	}
	
    .section4 .content,
    .section4 .title {
        width: 48%;
        display: inline-block;
    }

	.section4 .title > div.CenterX {
		position: relative;
		top: -15em;
	}
	
    .section4 .title img:first-child {
        width: 60% !important;
    }
		.section4 .title img:last-child {
			position: relative;
			left: -7em;
		}
	
	.section4 #canvas-wrapper {
		margin: 0 auto !important;
	}
	
	.section4 footer {
		display: block;
		position: absolute;
		bottom: 2.5em;
		right: 5em;
	}
	
	.section4 footer img {
		width: 15em;
	}
	
    /* --- page 5th --- */
	.section5 .fp-tableCell{
		vertical-align: middle !important;
	}
	
    .section5 .content,
    .section5 .title {
        display: inline-block;
        width: 48% !important;
    }

	.section5 header {
		position: absolute;
		top: 0;
	}
	.section5 .title {
		position: relative;
		top: -4em;	
	}	
		.section5 .title img {
			width: 90% !important;
		}
	
    /* --- page 6th --- */
    .section6 .title img:first-child {
        width: 40% !important;
    }
		.section6 .title img:last-child {
			width: 28% !important;
		}

    .section6 .content {
        bottom: 6em;
    }
		.section6 .content > div {
			width: 30%;
		}

    /* --- page 7th --- */
    .section7 form {
        width: 32% !important;
    }
		.section7 form input[type="text"] {
			height: 4em;
		}
	
	/* --- keyframes --- */
	@keyframes circle_rotate {
		0%   {  transform: rotate(40deg);  }
		50%  {  transform: rotate(-35deg); }
		100% {  transform: rotate(40deg);  }
	}
		@-webkit-keyframes circle_rotate {
			0%   {  -webkit-transform: rotate(40deg);  }
			50%  {  -webkit-transform: rotate(-35deg); }
			100% {  -webkit-transform: rotate(40deg);  }
		}
		@-moz-keyframes circle_rotate {
			0%   {  -moz-transform: rotate(40deg);  }
			50%  {  -moz-transform: rotate(-35deg); }
			100% {  -moz-transform: rotate(40deg);  }
		}

	@keyframes circle_rotate_reverse {
		0%   {  transform: rotate(-35deg); }		
		50%  {  transform: rotate(60deg);  }		
		100% {  transform: rotate(-35deg); }
	}	
		@-webkit-keyframes circle_rotate_reverse {
			0%   {  -webkit-transform: rotate(-35deg); }		
			50%  {  -webkit-transform: rotate(60deg);  }		
			100% {  -webkit-transform: rotate(-35deg); }
		}	
		@-moz-keyframes circle_rotate_reverse {
			0%   {  -moz-transform: rotate(-35deg); }		
			50%  {  -moz-transform: rotate(60deg);  }		
			100% {  -moz-transform: rotate(-35deg); }
		}
}

@media (max-width: 450px) and (min-width:320px) {
	.section3 header.Grid-Row {
		margin-bottom: 7em;	
	}
	
	.section7 form > div > *:not['textarea'] {
		height: 3em;
	}
}

@media (max-width: 320px) {
	.section2 header {
		margin: -4em 0 5em 0;
    	font-size: 0.9em;
	}
	.section2 .circle {
		width: 20em;
		height: 20em;
	}
		.section2 .circle > div > div {
			margin-top: 5em;
		}
	
	.section2 footer {
		bottom: 0;
	}
		.section2 footer:before {
			width: 20em;
			height: 20em;
			top: -3em;
			right: -10em;
		}
	
	.section3 header.Grid-Row {
		margin-bottom: 3em;
	}
	
	.section3 .lang > div {
		font-size: 0.5em;
		padding-top: 1em;
		font-weight: bold;
	}
	
	.section4 .title {
		margin-top: -2em;
	}
	
	.section5 .content .chess {
		margin: 0.5em auto;
	}
		.section5 .content .chess table td {
			width: 0.9em;
			height: 0.9em;
		}	
	
	.section4 .content .ballon > div:last-child {
		right: 4em;
		transform : scale(0.84,0.84);
		-webkit-transform : scale(0.84,0.84);
		-moz-transform : scale(0.84,0.84);
	}
	
	.section5 .title {
    	position: absolute;
    	bottom: 3em;
		width: 100%;
	}
		.section5 .title img {
			width: 70%;
		}
	
	.section6 .content {
		bottom: 2em;
	}
		.section6 .content > div {
			width: 80%;
		}
	
	.section7 header {
		top: 1em;
	}
	
	.section7 form > div > *:not(textarea) {
		height: 2.3em;
	}
}

@media (min-width: 1800px) {
	.section h4 {
		font-size: 2em;
	}
	
	/* --- page2 --- */
	.section2 div.adaptWrapper > div.circle_wider div.outer {
		width: 120em;
		height: 120em;
		left: -50em;
        top: -57em;
	}
	
	.section2 div.adaptWrapper > div.circle_wider div.inner {
		width: 70em;
		height: 70em;
		left: -28em;
        top: -34em;
	}
	
	.section2 div.adaptWrapper > div.circle_wider div.inner:before {
		right: 6.6em;
	}
	.section2 div.adaptWrapper > div.circle_wider div.inner:after {
		right: 5.4em;
	}
	
	.section2 div.adaptWrapper > div.circle_wider div.outer:after {
	    right: 19.1em;
	}
	.section2 div.adaptWrapper > div.circle_wider div.outer:before {
	    right: 20.5em;
	}
	
	.section2 h4 {
		font-size: 1.7em;
	}
	
	.section2 div.adaptWrapper > div > header {
		margin-top: 14em;
	}
	
	.section2 .title > div.Column_1-1 > img {
		width: 80%;
	}
	
	/* --- page3 --- */
	.section3 .lang_wrapper {
		bottom: 18em;
	}
	
	.section3 .title {
		margin-top: 4em;	
	}
	
	.section3 .lang > div {
		font-size: 2.3em;
	}
	
	/* --- page 5 --- */
	.section5 .content .chess table td {
		width: 3em;
		height: 3em;
	}
	
	.section5 .title {
		top: -10em;	
	}
	.section5 .title img {
		width: 140% !important;
	}
	
	/* --- page6 --- */
	.section6 .content > div {
		width: 45%;
		font-size: 1.7em;
	}
	
	/* --- page7 --- */
	.section7 form {
		width: 36% !important;
		font-size: 1.7em !important;
	}
	
	.section7 form > div > *:not[textarea] {
		height: 5em !important;
	}
	
}
